<template>
  <el-card
    class="dept-alarm work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="dept-alarm__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-alarm__title">{{ CORE.MAP.ALARM }}统计</span>
    </div>
    <div class="work-bench-department__card__body dept-alarm__body">
      <div class="dept-alarm__unit">个</div>
      <div ref="deptAlarmBarChartRef" class="dept-alarm__chart">暂无数据!</div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'
import { drewLine } from './bar'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptAlarm',

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  methods: {
    /**
     * @function 告警统计
     * @param {String} organId -部门ID
     */
    queryDeptAlarmChart(organId) {
      if (!organId) return

      dashboardDeptApi.queryDeptAlarmChart({ organId }).then((res) => {
        const first = (res.chart || [])[0] || {}
        this.$nextTick(() => {
          drewLine(
            this.$refs.deptAlarmBarChartRef,
            first.xdata || [],
            (first.data || []).map((item) => {
              return {
                name: item.legendName,
                data: item.ydata,
                color: { ALARM_LEVEL_COMMON: '#2B74E5', ALARM_LEVEL_IMPORTANT: '#F3B844', ALARM_LEVEL_URGENT: '#FF6A55' }[item.legendType],
              }
            }),
          )
        })
      })
    },
  },

  mounted() {
    this.queryDeptAlarmChart(this.organId)
  },

  watch: {
    organId(newVal) {
      this.queryDeptAlarmChart(newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
